<template>
  <transition name="dialog-fade">
    <div ref="dom" class="dialog-view" :style="dialogStyle" v-if="visible">
      <div class="dialog-drage" @mousedown="e => mouseDown(e)"></div>
      <div class="dialog-resize left" @mousedown="e => mouseDown(e, 'left')"></div>
      <div class="dialog-resize right" @mousedown="e => mouseDown(e, 'right')"></div>
      <div class="dialog-resize bottom" @mousedown="e => mouseDown(e, 'bottom')"></div>
      <i class="dialog-close el-icon-close"></i>
    </div>
  </transition>
</template>

<script>
import { nextZindex } from '@/utils/dialog'
export default {
  props: ['size', 'minsize', 'position', 'maxsize'],
  data() {
    return {
      type: '',
      temp: null,
      visible: true,
      info: {
        top: 0,
        left: 0,
        width: 0,
        height: 0,
        zIndex: nextZindex()
      }
    }
  },
  created() {
    if (this.size) {
      this.info.width = this.size[0]
      this.info.height = this.size[1]
    } else {
      this.info.width = 800
      this.info.height = 600
    }
    this.info.top = (window.innerHeight - this.info.height) / 2
    this.info.left = (window.innerWidth - this.info.width) / 2
  },
  computed: {
    dialogStyle() {
      const { width, height, top, left, zIndex } = this.info
      return {
        zIndex,
        top: top + 'px',
        left: left + 'px',
        width: width + 'px',
        height: height + 'px',
      }
    },
  },
  methods: {
    mouseDown({ clientX, clientY }, arrow) {
      const { left, top, width, height } = this.info
      if (arrow === 'right') {
        this.type = 'dialogResizeRight'
        this.temp = width - clientX
      } else if (arrow === 'left') {
        this.type = 'dialogResizeLeft'
        this.temp = [left - clientX, width + clientX]
      } else if (arrow === 'bottom') {
        this.type = 'dialogResizeBottom'
        this.temp = height - clientY
      } else {
        this.type = 'dialogMove'
        this.zIndex = nextZindex()
        this.temp = [left - clientX, top - clientY]
      }
      window.addEventListener('mouseup', this.mouseUp)
      window.addEventListener('mousemove', this.mouseMove)
    },
    mouseMove(e) {
      if (e.buttons === 0) {
        this.mouseUp()
        return
      }
      this[this.type](e)
    },
    dialogMove({ clientX, clientY }) {
      const [left, top] = this.temp
      this.info.top = top + clientY
      this.info.left = left + clientX
    },
    dialogResizeLeft({ clientX }) {
      const [left, width] = this.temp
      this.info.left = left + clientX
      this.info.width = width - clientX
    },
    dialogResizeRight({ clientX }) {
      this.info.width = this.temp + clientX
    },
    dialogResizeBottom({ clientY }) {
      this.info.height = this.temp + clientY
    },
    mouseUp(e) {
      this.type = ''
      window.removeEventListener('mouseup', this.mouseUp)
      window.removeEventListener('mousemove', this.mouseMove)
    }
  }
}
</script>


<style lang="scss" scoped>
.dialog-view {
  user-select: none;
  position: fixed;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  .dialog-close {
    position: absolute;
    cursor: pointer;
    z-index: 1px;
    right: 10px;
    top: 10px;
  }

  .dialog-drage {

    // background: rgba(0, 0, 0, 0.1);
    position: absolute;
    height: 50px;
    width: 100%;
    cursor: move;
  }

  .dialog-resize {
    // background: rgba(0, 0, 0, 0.1);
    position: absolute;

    &.left {
      top: 0;
      left: 0;
      width: 5px;
      height: 100%;
      cursor: ew-resize;
    }

    &.right {
      top: 0;
      right: 0;
      width: 5px;
      height: 100%;
      cursor: ew-resize;
    }

    &.bottom {
      left: 0;
      bottom: 0;
      height: 5px;
      width: 100%;
      cursor: ns-resize;
    }
  }
}
</style>